<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/taglibs.jsp"%>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
<%--    <meta name="viewport" content="width=device-width, initial-scale=1" />--%>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="${ctx}/resources/semanticui/semantic.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/resources/apps.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <title>职位列表</title>  
    <style>

        img { width: 100%; }

        li{
            width: 50%;
        }

        .position{
            border-bottom: solid 1px #CCCCCC;
        }

        .position-jobname{
            display: flex;
            word-break: normal;
            overflow: hidden;
            font-size: 16px;
            color: #333;
            font-weight: bold;
            width: 88%;
            padding-right: 25px;
            margin-top: 0.3em;
        }
        .position-jobname-status_green{
            font-size: 10px;
            color: #00FF00;
        }
        .position-jobname-status_red{
            font-size: 10px;
            color: #ff0000;
        }
        .position-company{
            line-height: 30px;
        }
        .position-base-info{
            font-size: 14px;
            color: #999;
            line-height: 30px;

        }

        .position-base-info_city{
            color: #C0C0C0;
            display: inline;
            font-size: 10px;
        }
        .position-base-info_domain {
            color: #C0C0C0;
            display: inline;
            font-size: 10px;
            padding: 0.3rem;
        }
        .position-base-info_date{
            color: #C0C0C0;
            display: inline;
            font-size: 10px;
            padding: 0.3rem;
        }
        .position-base-info_salary{
            float: right;
            font-size: 14px;
        }
        .no_more {
            color: #888;
            font-size: 10px;
            line-height: 35px;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
<div>
    <img src="${ctx}/resources/images/trend.jpg">
</div>
<ul class="nav nav-tabs" role="tablist" id="jobTab">
    <li role="presentation" class="active"><a href="#progress" aria-controls="home" role="tab" data-status="1" data-toggle="tab">进行中的职位</a></li>
    <li role="presentation"><a href="#hold" aria-controls="profile" role="tab" data-status="0" data-toggle="tab">Hold的职位</a></li>
</ul>
<div  id="n-page">
    <div id="row-data" >
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="progress" data-status="1">
                 <c:forEach items="${jobList}" var="jd">
                    <div class="position" data-position-id="${jd.id}">
                        <div class="position-jobname">
                                ${jd.name}
                        </div>
                        <div class="position-company">
                                ${jd.companyName}
                        </div>
                        <div class="position-base-info">
                            <div class="position-base-info_city">
                                <c:forEach items="${cities}" var="city">
                                    <c:if test="${city.id == jd.cityId}">
                                        ${city.name}
                                    </c:if>
                                </c:forEach>
                            </div>
                            <div class="position-base-info_domain">
                                <c:forEach items="${domains}" var="domain">
                                    <c:if test="${domain.id == jd.domainID}">
                                        ${domain.name}
                                    </c:if>
                                </c:forEach>
                            </div>
                            <div class="position-base-info_date">${jd.createDateStr}</div>
                            <c:if test="${jd.annualPayment <= 0 || jd.annualPayment == null}">
                                <div class="position-base-info_salary">年薪：面议</div>
                            </c:if>

                            <c:if test="${jd.annualPayment > 0}">
                                <div class="position-base-info_salary">年薪：${jd.annualPayment}W</div>
                            </c:if>

                        </div>
                    </div>
                </c:forEach>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="hold" data-status="0">

                <div role="tabpanel" class="tab-pane fade in active" id="progress">
                    <c:forEach items="${jobList}" var="jd">
                        <div class="position" data-position-id="${jd.id}">
                            <div class="position-jobname">
                                    ${jd.name}
                            </div>
                            <div class="position-company">
                                    ${jd.companyName}
                            </div>
                            <div class="position-base-info">
                                <div class="position-base-info_city">
                                    <c:forEach items="${cities}" var="city">
                                        <c:if test="${city.id == jd.cityId}">
                                            ${city.name}
                                        </c:if>
                                    </c:forEach>
                                </div>
                                <div class="position-base-info_domain">
                                    <c:forEach items="${domains}" var="domain">
                                        <c:if test="${domain.id == jd.domainID}">
                                            ${domain.name}
                                        </c:if>
                                    </c:forEach>
                                </div>
                                <div class="position-base-info_date">${jd.createDateStr}</div>
                                <c:choose>
                                    <c:when test="${jd.status > 0}"> <span class="position-jobname-status_green">进行中</span></c:when>
                                    <c:otherwise><span class="position-jobname-status_red">Hold</span></c:otherwise>
                                </c:choose>
                                <c:if test="${jd.annualPayment <= 0 || jd.annualPayment == null}">
                                    <div class="position-base-info_salary">年薪：面议</div>
                                </c:if>

                                <c:if test="${jd.annualPayment > 0}">
                                    <div class="position-base-info_salary">年薪：${jd.annualPayment}W</div>
                                </c:if>

                            </div>

                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
        <div class="no_more" id="noMore">没有更多内容了~</div>

    </div>
</div>



<!-- 测试用，正式发布关闭 
<div id="testid">
点击获取更多数据
</div>
-->
<input type="hidden" name="lastposition" id="lastjob" value="${fn:length(jobList)}"/>
<input type="hidden" name="hasmoredata" id="hasmoredata" value="yes"/> 

<script src="${ctx}/resources/jweixin-1.0.0.js"></script>
<script src="${ctx}/resources/semanticui/jquery-2.1.4.min.js"></script>
<script src="${ctx}/resources/semanticui/semantic.js" type="text/javascript"></script>
<script src="${ctx}/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">

wx.config({
    debug: false, 
    appId: "${config.appid}",  
    timestamp: ${config.currenttimestamp},  
    nonceStr: "${config.nonceStr}", 
    signature: "${config.signatureStr}", 
    jsApiList: ['checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'showOptionMenu']  
});
var status = 1;

    var datasource = { 
        moredata: function() { 
            var getUrl = '${ctx}/wechat/hr/moreJob.do';
            var offset  = $('#lastjob').val();
            var hasmore = $('#hasmoredata').val();

            getUrl += "?offset=" + offset+"&status="+status;
            var boxie=document.querySelector("#row-data");
            var pe=document.createElement("p");
           // pe.innerHTML="---不好意思，已经没有更多数据了---";
           //   if(hasmore != "yes"){
           //     // boxie.appendChild(pe);
           //     //  alert("---不好意思，已经没有更多数据了---");
           //
           //      return;
           //  }
            var that = this;

            $.ajax({ 
                    url: getUrl, 
                    type: "GET", 
                    success: function(data, status){ 
                        if(data.errorcode == 0) {
                            appendData(data);
                        } else {
                            var errorUrl = '${ctx}/wechat/headhunter/error.page';
                            location.href = errorUrl;
                        }
                    }, 
                    error: function(){ 
                        alert("服务出错，请稍后尝试"); 
                    } 
            });
        },


    };

    $(document).ready(function() { 
	    	var l = sessionStorage.getItem('index_list');
	   	 
	    	if(null !== l && '' !== l){
	    	    $("#row-data").html(l);
	    	    $(window).scrollTop(sessionStorage.getItem('index_scroll'));
	    	    page = sessionStorage.getItem('index_page');
	    	    sessionStorage.removeItem('index_list');
	    	    sessionStorage.removeItem('index_scroll');
	    	}else{
	    		datasource.moredata();
	    	};
       
            $(window).scroll(function() { 
                if($(window).scrollTop() == $(document).height() - $(window).height()) {
                    datasource.moredata();
                } 
            });
        
            $(document).on('click','.position', function() {
            	var offset  = parseInt($('#lastjob').val());
                var positionid = $(this).attr('data-position-id');
                var getUrl = '${ctx}/wechat/hunter/hr/toJobView.do?jobid='+positionid;
                sessionStorage.setItem('index_list',$("#row-data").html());
                sessionStorage.setItem('index_page',offset);
                sessionStorage.setItem('index_scroll',$(window).scrollTop());
                window.location.href = getUrl;
            });    
           
            wx.ready(function() {
            wx.onMenuShareAppMessage({
                title: 'Headoffer--专业招聘平台----推荐有奖！',  
                desc: '搭起企业和专业猎头的桥梁，为企业招募英才。',  
                link: 'http://www.tiaonali.com${ctx}/wechat/hunter/shareservice.page',  
                imgUrl: 'http://www.tiaonali.com${ctx}/resources/images/sharelogo.jpg',  
                type: 'link'
            });

            wx.onMenuShareTimeline({
                title: 'Headoffer--专业招聘平台----推荐有奖！',  
                desc: '搭起企业和专业猎头的桥梁，为企业招募英才。',  
                link: 'http://www.tiaonali.com${ctx}/wechat/hunter/shareservice.page',  
                imgUrl: 'http://www.tiaonali.com${ctx}/resources/images/sharelogo.jpg'
            });

            wx.showOptionMenu();
            
        });

        $("#jobTab a").on("shown.bs.tab", function (e) {
            var that = this;
            var activeTab = $(e.target).text();
            $('#noMore').hide();
            $('#lastjob').val(0);

            var previousTab = $(e.relatedTarget).text();
            $(".active-tab span").html(activeTab);
            $(".previous-tab span").html(previousTab);
            status = e.currentTarget.getAttribute('data-status');

            if(status == "0"){
                var obj = document.getElementById("hold");
                obj.innerHTML = '';
            }else{
                var obj = document.getElementById("progress");
                obj.innerHTML = '';
            }

            var getUrl = '${ctx}/wechat/hr/moreJob.do?status='+status;

            $.ajax({
                url: getUrl,
                type: "GET",
                success: function(data, status){
                    if(data.errorcode == 0) {

                        appendData(data);
                    } else {
                        var errorUrl = '${ctx}/wechat/headhunter/error.page';
                        location.href = errorUrl;
                    }
                },
                error: function(){
                    alert("服务出错，请稍后尝试");
                }
            });
        });


        
    });

function appendData(data) {
    var offset = parseInt($('#lastjob').val());
    var divstring = "";
    var joblist = data.data;

    var count = joblist.length;
    offset += parseInt(count);
    $('#lastjob').val(offset);
    if(joblist == null || count <= 0) {
        $('#noMore').show();
    }

    for (var i in joblist) {
        var jd = joblist[i];
        divstring += "<div class='position' data-position-id='"+jd.id+"'>\n";
        divstring += "<div class='position-jobname'>"+jd.name+"</div>";
        divstring += "<div class='position-company'>"+jd.companyName+"</div>";

        divstring += "<div class=\"position-base-info\">\n";
        divstring += "<div class=\"position-base-info_city\">"+ jd.city.name +"</div>";
        divstring += "<div class='position-base-info_domain'>"+jd.domainName+"</div>";
        divstring += "<div class=\"position-base-info_date\">"+jd.createDateStr+"</div>";
        if (jd.annualPayment <= 0){
            divstring += "<div class='position-base-info_salary'>年薪：面议</div>";
        } else{
            divstring +=  "<div class='position-base-info_salary'>年薪："+jd.annualPayment+"W</div>" ;
        }
        divstring += "</div>";
        divstring += "</div>";

    }
    var newdata = $(divstring);
    if(status == 0){
        $('#hold').append(newdata);
    }else{
        $('#progress').append(newdata);
    }


}




</script>
</body>
</html>